<template>
	<view class="p-10">
		<view class="flex flex-row flex-wrap rounded-lg bg-white mb-20 text-16" style="box-shadow: 0 0 5px 0px rgba(0,0,0,0.3)"  v-if="apply">
			<view class="w-full">
				<view v-if="apply.status==0" class="py-15 text-center">已提交申请，等待审核中...</view>
				<view v-else-if="apply.status==1" class="py-15 text-center">
					<view>已通过认证</view>
				</view>
				<view v-else-if="apply.status==-1" class="py-15 text-center">
					<view class="">未通过认证</view>
					<view class="text-red pt-10 text-14">原因：{{apply.review_reason}}</view>
				</view>
			</view>
		</view>
		<view class="flex flex-row flex-wrap rounded-lg bg-white" style="min-height: 80vh; box-shadow: 0 0 5px 0px rgba(0,0,0,0.3)" v-if="show_form">
			<view class="w-full p-20 text-14" style="color: #5E5E5E;" >
				<view class="bottom-line pt-12 pb-12 flex flex-row align-items-center">
					<text class="text-bold">公司名称<text class="text-red ml-1">*</text>：</text>
					<input class="flex-1 text-14" type="text" placeholder="请输入公司名称" placeholder-style="color:#B8B8B8" v-model="company"></input>
				</view>
				<view class="bottom-line pt-12 pb-12 flex flex-row align-items-center">
					<text class="text-bold">纳税人识别号<text class="text-red ml-1">*</text>：</text>
					<input class="flex-1 text-14" type="text"  maxlength="18" placeholder="请输入纳税识别号" placeholder-style="color:#B8B8B8" v-model="id_company"></input>
				</view>
				<view class="bottom-line pt-12 pb-12 flex flex-row align-items-center">
					<text class="text-bold">企业法人<text class="text-red ml-1">*</text>：</text>
					<input class="flex-1 text-14" type="text" placeholder="请输入企业法人" placeholder-style="color:#B8B8B8" v-model="legal_person"></input>
				</view>
				<view class="bottom-line pt-12 pb-12 flex flex-row align-items-center">
					<text class="text-bold">联系手机号<text class="text-red ml-1">*</text>：</text>
					<input class="flex-1 text-14" type="text" placeholder="请输入联系手机号" placeholder-style="color:#B8B8B8" v-model="phone"></input>
				</view>
				<!-- <view class="bottom-line pt-12 pb-12 flex flex-row align-items-center">
					<text class="text-bold">企业法人手机号<text class="text-red ml-1">*</text>：</text>
					<input class="flex-1 text-14" type="text" placeholder="请输入企业法人手机号" placeholder-style="color:#B8B8B8" v-model="legal_person_phone"></input>
				</view> -->
				<view class="bottom-line pt-12 pb-12 flex flex-row align-items-center">
					<view class="text-bold">营业执照<text class="text-red ml-1">*</text>：</view>
					<view class="text-0">
						<view v-if="!license_img" class="text-13 flex-center" style="width:100rpx; height:100rpx;color:#B8B8B8;border: 1px solid #CCC;border-radius: 5px;"  @tap="uploadImage">上传</view>
						<image v-else style="width:100rpx; height:100rpx;border-radius: 5px;" mode="aspectFill" :src="license_img" @tap="uploadImage"></image>
					</view>
				</view>
				<view class="bottom-line pt-12 pb-12 flex flex-row align-items-center">
					<view class="text-bold">授权书<text class="text-red ml-1">*</text>：</view>
					<view class="text-0">
						<view v-if="!license_img2" class="text-13 flex-center" style="width:100rpx; height:100rpx;color:#B8B8B8;border: 1px solid #CCC;border-radius: 5px;"  @tap="uploadImage2">上传</view>
						<image v-else style="width:100rpx; height:100rpx;border-radius: 5px;" mode="aspectFill" :src="license_img2" @tap="uploadImage2"></image>
					</view>
				</view>
				<view class="w-full rounded-sm text-bold text-white text-center text-16 mt-20" style=" height:80rpx; line-height: 80rpx; background-color: #006BFF;" @tap="saveApply">{{apply ? '重新申请' : '提交申请'}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	import request from '/utils/request.js';
	import {uploadImage} from '/utils/util.js'
	export default {
		data() {
			return {
				get_latest_done: false,
				apply: '',
				company: '',
				id_company: '',
				phone: '',
				legal_person: '',
				legal_person_phone: '',
				license_img: '',
				license_img2: '',
				
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
			show_form: function(){
				if(this.userInfo.is_verification){
					return false;
				}else{
					// 待审核
					if(this.apply){
						if(this.apply.status == 0){
							return false;
						}else if(this.apply.status == -1){
							return true;
						}
						return true;
					}
					
					if(!this.apply && this.get_latest_done){
						return true;
					}else{
						return false;
					}
				}
			}
		},
		onLoad() {
			if(!this.userInfo.phone){
				uni.showToast({
					title: '请先登录',
					icon: 'none',
				})
				setTimeout(()=>{
					uni.navigateBack()
				}, 1000)
			}
		},
		onShow() {
			this.getApply();
		},
		onReachBottom() {
			
		},
		onShareAppMessage() {
			return {
			  title: '飞兔货运',
			  path: '/pages/task/index',
			  // imageUrl : ''
			}
		},
		onShareTimeline() {
			return {
			  title: '飞兔货运',
			  // query: '',
			  // imageUrl : ''
			}
		},
		methods: {
			...mapMutations(['login', 'setUserInfo']),
			// 上传图片
			uploadImage(){
				uploadImage({
					count: 1
				}).then(res=>{ 
					console.log(res)
					let file = res[0];
					this.license_img = file.url
				})
			},
			// 上传图片
			uploadImage2(){
				uploadImage({
					count: 1
				}).then(res=>{ 
					console.log(res)
					let file = res[0];
					this.license_img2 = file.url
				})
			},
			// 获取最新的申请
			getApply(){
				request.post('/merchant/verificationLatest').then(res=>{
					this.apply = res;
					this.get_latest_done = true;
					if(this.apply){
						this.company = res.company;
						this.id_company = res.id_company;
						this.phone = res.phone;
						this.legal_person = res.legal_person;
						this.legal_person_phone = res.legal_person_phone;
						this.license_img = res.license_img;
						this.license_img2 = res.license_img2;
					}
				})
			},
			// 提交申请
			saveApply(){
				request.post('/merchant/verification', {
					company: this.company,
					id_company: this.id_company,
					phone: this.phone,
					legal_person: this.legal_person,
					legal_person_phone: this.legal_person_phone,
					license_img: this.license_img,
					license_img2: this.license_img2,
				}).then(res=>{
					uni.showToast({
						title: '提交成功'
					})
					this.getApply();
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #FFF8F5;
	}
	.bottom-line{
		border-bottom: 1px solid #bbb;
	}
</style>
